<template>
  <div style="background: #F7F7F7;height: 100%;width: 100%">
    <div style="padding: 3% 0 0 20%">
      <img src="">
    </div>








    <!--    第三个页面-->
    <div class="ka-3" v-show="pageThree" >
      <div style="height: 80px;background-color: #E4E4E4">
        <div style="padding: 3% 0 0 45%;font-size: 18px">
          <span >申请成为讲师</span>
        </div>

        <div class="one">
          <span>签订协议</span>
        </div>
        <div class="two" style="background-color: #0099FF;color: #FFFFFF">
          <span>填写资料</span>
        </div>
        <div class="three">
          <span>审核</span>
        </div>
        <div style="margin: 15% 0 0 9%">
          名称：<input placeholder="请输入讲师名称" class="yanzhengma_input" v-model="formupd.tName"></input><br>
          简介：<textarea type="text" class="yanzhengma_input" style="width: 700px;height: 300px" v-model="formupd.tJianjie"></textarea>
        </div>
        <el-divider></el-divider>
        <el-form style="margin: 1% 0 0 9%">
          手机号：<input type="text"  class="yanzhengma_input" v-model="formupd.tPhone"   disabled="ture"></input><br>
          验证码：<input type="text" placeholder="请输入验证码" class="yanzhengma_input" v-model="picLyanzhengma" ></input>
          <input type="button"  @click="createCode"  class="verification" v-model="checkCode" />
          <br>
          密 码   ：<input type="password" placeholder="请输入密码" class="yanzhengma_input" v-model="formupd.waitOne"></input><br>

          <div class="text-three">
            <button style="height: 46px" @click="tj()">提交</button>
          </div>
        </el-form>
      </div>
    </div>
    <!--    第四个页面-->
    <div class="ka-4" v-show="pageFour">
      <div style="height: 80px;background-color: #E4E4E4">
        <div style="padding: 3% 0 0 45%;font-size: 18px">
          <span >申请成为讲师</span>
        </div>
      </div>
      <div class="one">
        <span>签订协议</span>
      </div>
      <div class="two" style="background-color: #0099FF;color: #FFFFFF">
        <span>填写资料</span>
      </div>
      <div class="three" style="background-color: #0099FF;color: #FFFFFF">
        <span>审核</span>
      </div>
      <div>
        <div class="success_msg">
          <img style="width: 70px;height: 70px;padding-top: 15%" src="">
          <span style="font-size: 20px;margin: 0 0 0 10% ">资料提交成功！</span><br><br>
          <span style="font-size: 14px;color: #999;margin: 0 0 0 30% ">审核结果将在2个工作日内完成，请留意！</span>
        </div>
        <div class="text-three" style="margin: 18% 0 0 8% ">
          <button style="height: 46px" @click="sy()">返回首页</button>
        </div>
      </div>
    </div>

    <br>
    <br>



    <br>
    <br>



  </div>
</template>



<script>
  import qs from  'qs'
export default {
  name: "apply3",

  data(){
    return{
      pageThree:true,
      pageFour:false,
      picLyanzhengma:'',
      checkCode:'',

      formupd:{
        uid:"",
       waitOne:"",
       tJianjie:"",

       tName:"",
        tPhone:this.$route.query.tPhone,
     }
    }
  },

  methods:{



    // 图片验证码
    createCode(){
      //先清空验证码的输入
      this.code = "";
      this.checkCode = "";
      this.picLyanzhengma = "";
      //验证码的长度
      var codeLength = 4;
      //随机数
      var random = new Array(0,1,2,3,4,5,6,7,8,9/*,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'*/);
      for(var i = 0; i < codeLength; i++) {
        //取得随机数的索引（0~35）
        var index = Math.floor(Math.random()*10);
        //根据索引取得随机数加到code上
        this.code += random[index];
      }
      //把code值赋给验证码
      this.checkCode = this.code;
    },


    //手机号  验证码验证
    getAll() {
      if (this.formupd.tPhone === '') {
        this.$alert('请输入手机号', '提示', {
          confirmButtonText: '确定',
        });
      } else {
        if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.formupd.tPhone)) {
          this.$alert('请输入正确手机号', '提示', {
            confirmButtonText: '确定',
          });
        }else if (this.picLyanzhengma===''){
          this.$alert('请输入图形验证码', '提示', {
            confirmButtonText: '确定',
          });
        }else  if (this.picLyanzhengma!=this.checkCode){
          this.$alert('请输入正确图形验证码', '提示', {
            confirmButtonText: '确定',
          });
        }else {
          //验证通过 反转页面
        }
      }
    },
    tj(){
      if (this.formupd.tName===''){
        this.$alert('请输入名称', '提示', {
          confirmButtonText: '确定',
        });
      }else if (this.formupd.tJianjie===''){
        this.$alert('请填写您的简介', '提示', {
          confirmButtonText: '确定',
        });
      }else if (this.picLyanzhengma!=this.checkCode){
        this.$alert('请输入正确验证码', '提示', {
          confirmButtonText: '确定',
        });
      }else if (this.formupd.waitOne===''){
        this.$alert('请输入密码', '提示', {
          confirmButtonText: '确定',
        });
      }else {
        let uid=sessionStorage.getItem("uid")
        this.formupd.uid=uid
        //获取uid修改密码
        //alert(JSON.stringify(this.waitOne))
        this.$axios.get("http://localhost:8061/list/user/upduid?uid="+this.formupd.uid+"&waitOne="+this.formupd.waitOne).then(r=>{
        /*  this.waitOne=r.data.obj;*/
        })
        //添加进user表里面
        this.$axios.post("http://localhost:8061/list/user/inseuid",qs.stringify(this.formupd)).then(r=>{
          alert(JSON.stringify(this.formupd.uid))
        })
        /*alert(JSON.stringify(this.uid))*/
        //验证通过 反转页面
        this.pageThree=false;
        this.pageFour=true;

      }
    },
    sy(){
      this.$router.push({
        path:"/"
      })
    }

  },
  created(){
    this.createCode();
  },
}
</script>

<style scoped>
.ka-1{
  height: 1530px;
  background-color: #FFFFFF;
  width: 900px;
  margin: 3% 0 0 20%;
  border: 1px solid #E4E4E4;
  border-radius: 15px
}
.ka-2{
  margin: 3% 0 0 20%;
  background-color: #FFFFFF;
  width: 900px;
  height: 600px;
  border: 1px solid #E4E4E4;
  border-radius: 15px
}
.ka-3{
  margin: 3% 0 0 20%;
  width: 900px;
  height: 1000px;
  background-color: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 15px
}
.ka-4{
  margin: 3% 0 0 20%;
  width: 900px;
  height: 600px;
  background-color: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 15px
}
.text {
  font-size: 20px;
}

.clearfix:after {
  display: table;
  content: "";
}
.el-card__header{
  width: 200px;
  background-color: #E4E4E4;
}
.clearfix{
  margin: auto;

}
.clearfix:after {
  clear: both
}

.box-card {
  margin: auto;
  width: 59%;
}
.one{
  width: 270px;
  height: 30px;
  background-color: #0099FF;
  color: #FFFFFF;
  font-size: 90%;
  float: left;
  margin: 5% 0 0 3%
}
.one span{
  float: left;
  margin: 2% 0 0 40%;
}
.two{
  width: 270px;
  height: 30px;
  background-color: #F2F2F2;
  color: #CDCDCD;
  font-size: 90%;
  float: left;
  margin: 5% 0 0 2%
}
.two span{
  float: left;
  margin: 2% 0 0 40%;
}
.three{
  width: 270px;
  height: 30px;
  background-color: #F2F2F2;
  color: #CDCDCD;
  font-size: 90%;
  float: left;
  margin: -3.5% 0 0 67%
}
.three span{
  float: left;
  margin: 2% 0 0 40%;
}
.text-one{
  width: 800px;
  border: 2px solid #E4E4E4;
  float: left;
  margin: 5% 0 0 5.5%;
}
.text-one p{

}
.text-two{
  width: 800px;
  height: 32px;
  border: 1px solid #E4E4E4;
  float: left;
  margin: 0 0 0 5.5%;
}
.text-two div{
  margin: 1% 0 0 10%;
}
.text-three{
  width: 800px;
  height: 100px;
  float: left;
  margin: 0 0 0 5.5%;
}
.text-three button{
  width: 320px;
  height: 36px;
  background-color: #D51423;
  border-radius: 7px;
  color: #FFFFFF;
  float: left;
  margin: 5% 0 0 28%;
}
.di-one{
  text-align: center;
  font-size: 13px;
}
.di-two{
  text-align: center;
  font-size: 13px;
}
.di-three{
  font-size: 13px;
  color: #F7F7F7;
  text-align: center;
}
.di-three-one{
  height: 30px;
  background-color: #666666;
}
.di-three-two{
  font-size: 14px;
  height: 30px;
  background-color: #333333;
}

.yanzhengma_input{
  font-family: 'Exo 2', sans-serif;
  border: 1px solid #fff;
  outline: none;
  border-radius: 10px;
  letter-spacing: 1px;
  font-size: 17px;
  font-weight: normal;
  padding: 5px 0 5px 10px;
  margin-left: 30px;
  width: 310px;
  height: 30px;
  margin-top: 20px;
  border: 1px solid #e6e6e6;
}
.verification{
  border-radius: 12px;
  width:100px;
  letter-spacing:5px;
  margin-left: 50px;
  height: 40px;
  transform: translate(-15px,0);
}
.success_msg{
  width: 380px;
  height: 84px;
  margin:   auto;
  background: transparent;
}
</style>
